<template>
	<section class="menu">
		<div class="menu" v-for="( menu) in menus.filter(item=>item.group == 0)" :key='menu.path' style="width:300px;">
			<a :class="{link:menu.level==3}" v-if="menu.name " @click="goto(menu.url )"
			   :style="{'padding-left':(menu.level * 2)+'rem', }">
				{{menu.name || menu.path }}
			</a>
		</div>
	</section>
</template>

<script>
	export default {
		data(){ 
			return { 
				menus: []
			}
		},
		
		created() {
			this.menus = window.routers; 
		},
		
		methods:{
			goto(path){
				this.$router.push(path)
			}
		}
	}
</script>

<style scoped="scoped">
	.menu{
		padding: 0.3rem;
		font-size: 1rem;
	}
	
	.group{ 
		flex:1;
		border:solid 1px #ddd;
	}
	
	.link{
		color:#005FFF;
	}
</style>
